<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item :label="`${$t('common.choose_merchant')}:`">
					<merchant-select
						v-model="queryData.merchantId"
						:merchantInfo.sync="merchantObj"
						@change="handleMerchantChange"
					></merchant-select>
				</el-form-item>
				<el-form-item
					prop="operateDate"
					:label="`${$t('common.updateAt')}:`"
				>
					<el-date-picker
						v-model="queryData.operateDate"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						value-format="timestamp"
						style="width: 400px"
						:default-time="defaultTime"
						:clearable="false"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.bmh_account')}:`"
					prop="bmhName"
					label-width="110px"
				>
					<el-input
						v-model.trim="queryData.bmhName"
						v-input="{ name: 'noEmpty' }"
						clearable
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.bmh_id')}:`"
					prop="bmhId"
					label-width="110px"
				>
					<el-input
						v-model.trim="queryData.bmhId"
						v-input="{ name: 'noEmpty' }"
						clearable
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-form-item prop="userNameType">
						<el-select
							v-model="queryData.userNameType"
							:placeholder="$t('common.select_all')"
							style="width: 130px; margin-right: -14px;"
						>
							<el-option
								v-for="item in userNameTypeArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="userName">
						<el-input
							v-model="queryData.userName"
							v-symbols
							size="medium"
							:placeholder="$t('common.please_enter')"
							clearable
							style="width: 180px"
						></el-input>
					</el-form-item>
				</el-form-item>
				<el-form-item
					prop="accountType"
					:label="`${$t('common.number_type')}:`"
				>
					<el-select
						v-model="queryData.accountType"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						collapse-tags
					>
						<el-option
							v-for="item in accountTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					prop="windControlId"
					:label="`${$t('common.risk_control_level')}:`"
				>
					<el-select
						v-model="queryData.windControlId"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
					>
						<el-option
							v-for="item in vipDict"
							:key="item.id"
							:label="item.windControlLevelName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					prop="operateType"
					:label="`${$t('common.operation_type')}:`"
				>
					<el-select
						v-model="queryData.operateType"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
					>
						<el-option
							v-for="item in operateTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					align="center"
					:label="$t('common.member_number')"
					width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
						<!-- <Copy
								v-if="!!scope.row.userName"
								:title="scope.row.userName"
								:copy="copy"
							/>
							<span v-else>-</span> -->
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.number_type')"
					width="100"
				>
					<template slot-scope="scope">
						<span>
							{{
								typeFilter(scope.row.accountType, 'accountType')
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.top_agent')"
					width="100"
				>
					<template slot-scope="scope">
						{{ scope.row.parentProxyName || '-' }}
						<!-- <Copy
								v-if="!!scope.row.parentProxyName"
								:title="scope.row.parentProxyName"
								:copy="copy"
							/>
							<span v-else>-</span> -->
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.belong_merchant')"
					width="100"
				>
					<template slot-scope="scope">
						<span>
							{{ merchantFilter(scope.row.merchantId) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					width="240"
					:label="`${$t('member.bmh_account')}`"
				>
					<template slot-scope="scope">
						{{ scope.row.bmhName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					width="240"
					:label="`${$t('member.bmh_id')}`"
				>
					<template slot-scope="scope">
						{{ scope.row.bmhId || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.risk_control_level')"
					width="110"
				>
					<template slot-scope="scope">
						{{ scope.row.windControlName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.operation_type')"
					width="100"
				>
					<template slot-scope="scope">
						<span>
							{{ getOperateType(scope.row.operateType) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('member.remarks')"
					width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.remark || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.updateBy')"
					width="120"
				>
					<template slot-scope="scope">
						{{ scope.row.operator || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.updateAt')"
					min-width="130"
				>
					<template slot-scope="scope">
						{{ scope.row.createDt || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import dayjs from 'dayjs'
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
const start = () =>
	dayjs()
		.startOf('day')
		.valueOf()
const end = () =>
	dayjs()
		.endOf('day')
		.valueOf()
export default {
	name: routerNames.bmhAccountRecord,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				merchantId: undefined,
				operateDate: [start(), end()],
				userNameType: '1',
				userName: undefined,
				parentProxyName: undefined,
				operator: undefined,
				accountType: undefined,
				windControlId: undefined,
				operateType: undefined
			},
			dataList: [],
			merchantObj: '',
			total: 0,
			vipDict: []
		}
	},
	computed: {
		accountTypeArr() {
			return this.globalDics.accountType || []
		},
		userNameTypeArr() {
			return [
				{ code: '1', description: '会员账号' },
				{ code: '2', description: '上级代理' },
				{ code: '3', description: '操作人' }
			]
		},
		operateTypeArr() {
			return [
				{ code: '0', description: '删除钱包' },
				{ code: '1', description: '添加钱包' },
				// { code: '2', description: '下架' },
				{ code: '3', description: '启用' },
				{ code: '4', description: '禁用' }
			]
		}
	},
	created() {
		this.handleMerchantChange()
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
	},
	methods: {
		getOperateType(code) {
			return (
				this.operateTypeArr.find((item) => {
					return Number(item.code) === Number(code)
				})?.description || '-'
			)
		},
		handleMerchantChange() {
			this.getWindControllerLevelDict({
				windControlType: 7,
				merchantId: this.queryData.merchantId
			})
		},
		getWindControllerLevelDict(params) {
			this.queryData.windControlId = undefined
			this.vipDict = []
			this.$api.getSelectWindControlLevel(params).then((res) => {
				if (res?.code === 200) {
					this.vipDict = res?.data || []
				}
			})
		},
		loadData() {
			this.dataList = []
			this.loading = true
			const create = this.queryData.operateDate || []
			const [startTime, endTime] = create
			let params = {
				...this.queryData,
				eventTimeStart: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				eventTimeEnd: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			if (params.windControlId) {
				params.windControlIds = [params.windControlId]
				delete params.windControlId
			}
			// 上级代理
			if (params.userNameType === '2') {
				params.parentProxyName = params.userName
			}
			// 操作人
			if (params.userNameType === '3') {
				params.operator = params.userName
			}
			if (params.userNameType !== '1') {
				delete params.userName
			}
			delete params.operateDate
			delete params.userNameType

			this.$api
				.getBmhAccountRecordList(params)
				.then((res) => {
					const {
						code,
						data: { record, totalRecord },
						msg
					} = res
					if (res && code && code === 200) {
						this.dataList =
							(res.data &&
								record.length &&
								Object.freeze(record)) ||
							[]
						this.total = (res.data && totalRecord) || 0
					} else {
						this.$message({
							message: res && msg,
							type: 'error'
						})
					}
				})
				.catch(() => {})
				.finally(() => {
					this.loading = false
				})
		},
		reset() {
			Object.keys(this.queryData).forEach((key) => {
				this.queryData[key] = undefined
			})
			this.queryData.userNameType = '1'
			this.$refs.form.resetFields()
			this.merchantObj = ''
			this.pageNum = 1
			this.queryData.operateDate = [start(), end()]
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped></style>
